<template>
  <div style="width:100%;height: 100%;background: #101e3f">
    <el-row>
      <!--摄像头数据-->
      <el-col :span="4" style="height: 100vh;background: rgba(0,48,83,0.4);padding:20px 20px">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入摄像头名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
          <el-select v-model="deptName" filterable placeholder="请选择摄像头名称" style="width: 100%" @change="changeDevice">
            <el-option v-for="item in deviceList" :key="item.DeviceID" :label="item.DeviceName"
              :value="item.DeviceID"></el-option>
          </el-select>
        </div>
        <div class="head-container">
          <el-scrollbar style="height: 80vh;" wrap-style="overflow-x: hidden">
            <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
              :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick" />
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="20" style="padding:20px">
        <el-row :gutter="10">
          <!-- el-icon-s-grid el-icon-menu el-icon-full-screen -->
          <span style="color: #fff;">分屏：</span>
          <el-button type="success" icon="el-icon-menu" circle @click="handlerFourScreen"></el-button>
          <el-button type="info" icon="el-icon-s-grid" circle @click="handlerNineScreen"></el-button>
          <el-button type="primary" icon="el-icon-film" circle @click="handlerSingleScreen"></el-button>
        </el-row>
        <el-row style="">
          <el-col :span="windowNum.length == 9 ? 8 : (windowNum.length == 16 ? 6 : 12)"
            v-for="(item, index) in windowNum" :key="index"
            :class="wndIndex == index ? 'camera-item-active' : 'camera-item-normal'" class="camera-item">
            <div @dblclick="setScreen(index)">
              <div @click="selectWindow(index)"
                :class="windowNum.length == 9 ? 'containerCss' : (windowNum.length == 16 ? 'container16' : 'container12')">
                1111  {{playerInstance[index]}}
                <!--<SkLivePlayer :id="'skeyeVss' + index" :url="playerInstance[index]" style="width: 100%;height:100%"-->
                <!--  :key="playerInstance[index]">-->
                <!--</SkLivePlayer>-->
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios'
import SkLivePlayer from '@/components/Player/sk-live-player.vue'
export default {
  components: {
    SkLivePlayer
  },
  data() {
    return {
      // 預覽視窗數量
      windowNum: [],
      // 預覽實例數組
      playerInstance: [],
      deviceList: [],
      // 摄像头树状列表
      deptOptions: [
        {
          id: 1,
          label: '兴城派出所',
          children: [
            {
              id: 2,
              label: '询问室1-1',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc1&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '192.168.1.108',
                port: '80',
                username: 'admin',
                password: 'zkh@2024',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 3,
              label: '询问室1-2',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc2&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.238',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 4,
              label: '讯问室1-1',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc3&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.237',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 5,
              label: '讯问室1-2',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc4&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.236',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 6,
              label: '信息采集室1-1',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc5&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.235',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 7,
              label: '信息采集室1-2',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc6&devicechannel=0&streamtype=0&playback=0',

              ipcInfo: {
                ip: '59.163.38.234',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 8,
              label: '调解室',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc7&devicechannel=0&streamtype=0&playback=0',

              ipcInfo: {
                ip: '59.163.38.233',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 9,
              label: '枪库',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc8&devicechannel=0&streamtype=0&playback=0',

              ipcInfo: {
                ip: '59.163.38.232',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 10,
              label: '值班室1',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc9&devicechannel=0&streamtype=0&playback=0',

              ipcInfo: {
                ip: '59.163.38.231',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 11,
              label: '值班室2',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc10&devicechannel=0&streamtype=0&playback=0',

              ipcInfo: {
                ip: '59.163.38.230',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 12,
              label: '值班大厅',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc11&devicechannel=0&streamtype=0&playback=0',

              ipcInfo: {
                ip: '59.163.38.229',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 13,
              label: '办案区走廊',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc12&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.228',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 14,
              label: '办案区走廊',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc13&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.228',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 15,
              label: '办案区走廊',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc14&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.228',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 16,
              label: '办案区走廊',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc15&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.228',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
            {
              id: 17,
              label: '办案区走廊',
              url: 'http://59.163.52.234:8080/cgi-bin/live.flv?DeviceToken=xc16&devicechannel=0&streamtype=0&playback=0',
              ipcInfo: {
                ip: '59.163.38.228',
                port: '80',
                username: 'admin',
                password: 'xc0812%xingchen',
                channelId: '1',
                streamType: 1,
                wndIndex: 0,
              },
            },
          ]
        }
      ],
      deptName: '',
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 摄像头预览窗口编号
      wndIndex: -1,
      baseUrl: process.env.VUE_APP_BASE_API,
      // h5播放器
      // this.flvPlayer: null,
      wsFlvUrl: null
    }
  },
  created() {
    this.getIpcOptions();
    for (let index = 0; index < 9; index++) {
      let data = { wndNum: index, inUse: false }
      this.windowNum.push(data);
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  beforeDestroy() {
    this.playerInstance.forEach(item => {
      if (item) {
        item.videoPlayer.stop()
        item.videoPlayer.close();
      }
    })
  },
  methods: {
    // 获取摄像头列表
    getIpcOptions() {
      axios({
        method: 'GET',
        url: this.baseUrl + '/business/ipc/getIpcTree/true',
        // url: 'http://59.163.52.234:8080/cgi-bin/proxycmd?method=GetDeviceList',
        withCredentials: false // 根据需求设置
        // 请求体参数
      }).then(response => {
        console.log(response.data);
        if (response.data.code == 200) {
          this.deptOptions = response.data.data;
        } else {
          this.$modal.msgError(response.msg);
        }
      })
    },
    // 选择窗口 - 取消选中窗口
    selectWindow(index) {
      this.wndIndex = this.wndIndex == index ? -1 : index;
      console.log(index);

    },
    // 双击窗口全屏
    setScreen(index) {
      this.requestFullscreen(document.querySelector('#canvasElement' + index))
    },
    // 设置全屏
    requestFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    // 取消全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
    },
    // 获取树结构数据
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 树节点点击事件
    handleNodeClick(data) {

      if (data) {
        this.openPlayer(data, this.wndIndex)
      }

      // if (data) {
      //   // this.setPlayerSource(data.url, this.wndIndex)
      //   // this.openPlayer(data, this.wndIndex)
      //   this.openPlayer(data, this.wndIndex)
      // }
    },
    // 打开摄像头
    // @param connectInfo 摄像头信息（摄像头ip，摄像头端口，摄像头登录名username，摄像头登录密码password）
    openPlayer(connectInfo, windowIndex) {
      let flvPlayer, canvasRef, videoRef, index, options, newArray;
      let that = this;
      // let newSource = `http://59.163.52.234:8090/cgi-bin/live.flv?DeviceToken=${connectInfo.externalToken}&devicechannel=0&streamtype=0&playback=0`;
      // let newSource = `ws://59.163.52.234:8088/cgi-bin/live.flv?DeviceToken=${connectInfo.externalToken}&devicechannel=0&streamtype=0&playback=0`;
      // this.wsFlvUrl = 'http://59.163.52.234:8000/share.html#/?deviceId=1&channelId=1&protocol=ws_flv&token=&stretch=no'
      this.wsFlvUrl = 'ws://59.163.52.234:18080/live/stream_1_0.flv'
      // 摄像头连接实例

      // windowIndex 窗口 ，index（预览实例）
      if (windowIndex == -1) {
        // 没有选择窗口默认用下一个窗口打开
        if (this.playerInstance.length < this.windowNum.length) {
          // 判断窗口是否已经打开
          newArray = this.windowNum.filter((item, index) => item.inUse == false); // 结果为 [2, 3]
          index = newArray[0].wndNum;
          this.playerInstance[index] = this.wsFlvUrl;
          this.windowNum[newArray[0].wndNum].inUse = true;
        } else {
          // 当所有窗口都在使用，那么默认在第一个窗口打开下一个摄像头的视频
          index = 0;
          this.playerInstance[0] = this.wsFlvUrl;
          videoRef = document.getElementById('videoElement0')
        }
        console.log(this.playerInstance);
      } else {
        // 选中窗口，用当前的窗口打开摄像头监控视频
        // inUse 窗口是否在使用中true（使用中），false（未使用）
        this.windowNum[windowIndex].inUse = true;
        this.playerInstance[windowIndex] = this.wsFlvUrl;
      }
    },

    // 选择摄像头设备
    changeDevice(val) {
      console.log(val);
      axios({
        method: 'GET',
        url: 'http://59.163.52.234:8000/api/v1/devices/channelstream',
        params: {
          device: val,
          channel: 1,
          protocol: 'FLV'
        }
        // 请求体参数
      }).then(response => {
        console.log(response.data.SkeyeVSS.Body);

      })
    },
    // 视频单屏显示
    handlerSingleScreen() {
      // this.screenList = 16;
      this.windowNum = []
      this.playerInstance.length = 16;
      for (let index = 0; index < 16; index++) {
        let data = { wndNum: index, inUse: false }
        this.windowNum.push(data);
      }
      console.log(this.windowNum.length);

    },
    // 视频四屏显示
    handlerFourScreen() {
      // this.screenList = 4;
      this.playerInstance.length = 4;
      this.windowNum = []
      for (let index = 0; index < 4; index++) {
        let data = { wndNum: index, inUse: false }
        this.windowNum.push(data);
      }
      console.log(this.windowNum.length);

    },
    // 视频九屏显示
    handlerNineScreen() {
      // this.screenList = 9;
      this.playerInstance.length = 9;
      this.windowNum = []

      for (let index = 0; index < 9; index++) {
        let data = { wndNum: index, inUse: false }
        this.windowNum.push(data);
      }
      console.log(this.windowNum.length);

    },
  },
}
</script>
<style scoped lang="scss">
.camera-item {
  // margin-bottom: 20px;
}

// 窗口未选中
.camera-item-normal {
  height: 100%;


  div {
    text-align: center;
  }

  .containerCss {
    border: 1px solid #465171;
    //background-color: #000;
    width: 100%;
    height: 30vh;
  }

  .container16 {
    border: 1px solid #465171;
    //background-color: #000;
    width: 100%;
    height: 23vh
  }

  .container12 {
    border: 1px solid #465171;
    //background-color: #000;
    width: 100%;
    height: 46vh
  }
}

// 窗口选中
.camera-item-active {
  height: 100%;

  div {
    text-align: center;
  }

  .containerCss {
    border: 1px solid red;
    //background-color: #000;
    width: 100%;
    height: 30vh
  }

  .container16 {
    border: 1px solid red;
    //background-color: #000;
    width: 100%;
    height: 23vh
  }

  .container12 {
    border: 1px solid red;
    //background-color: #000;
    width: 100%;
    height: 46vh
  }
}

::v-deep .head-container .el-tree {
  position: relative;
  cursor: default;
  //background: rgba(0, 48, 83, 0.4);
  // background: none;
  color: #CAE0FF;
  //border: 1px solid #465171;
}

::v-deep .head-container .el-scrollbar__wrap {
  overflow-x: auto;
  height: calc(100% + 10px);
  /* 多出来的10px是横向滚动条默认的样式 */
}
</style>
